<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>二维码扫描</title>
    <link rel="stylesheet" type="text/css" href="lib/my.css">
</head>

<body>
<h1>这是移动端扫码登录</h1>
<div>
    <h2>登录操作</h2>
    <div>
        <form id="loginForm">
            <p>用户名：<input name="username"/></p>
            <p>密码：<input type="password" name="password"/></p>
        </form>
        <p>
            <button id="login" type="button">登录</button>
<!--            <button id="testAlert" type="button">测试弹窗</button>-->
        </p>
    </div>
</div>
<hr>
<div>
    <h2>登录状态</h2>
    <p>登录后的 accessToken: <input id="accessToken"></p>
</div>
<hr>
<div>
    <h2>h5扫一扫， 模仿app扫一扫操作</h2>
    <div class="qr-btn" node-type="qr-btn">扫码登录
        <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1"/>
    </div>
</div>
<!--    <div>-->
<!--        <div class="qr-btn" node-type="qr-btn">扫描二维码2-->
<!--            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码2" />-->
<!--        </div>-->
<!--    </div>-->
<div class="result-qrcode">
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery-alert-master/alert/alert.min.js"></script>

<script src="lib/zepto.js"></script>
<script src="lib/qrcode.lib.min.js"></script>
<script type="text/javascript">

    var qrcodeResultCallback;

    $(function (){

        /**
         * 这里是扫码业务逻辑：
         * 1. 从pc端的二维码中，获取临时扫码凭证token.
         * 2. 认证客户端的accessToken 是否合法，并且校验 临时扫码登录token关联的二维码是否有效.
         * 3. 如果完成了上一步的认证，接着就是让客户确认扫码登录。
         *
         */

        /**
         * 扫码回调函数
         * @param token 二维码内容
         */
        qrcodeResultCallback = function qrcodeResultCallback(token) {

            // alert(token);
            //检查token是否有效
            if(token == 'error decoding QR Code' || token == ''){
                alert("图片二维码识别失败")
                return;
            }

            token = JSON.parse(token).token;
            // alert(token);
            authAccessToken(token).then(function (data) {
                //认证通过
                $.confirm('确认用户【'+ data.username +'】登录？', function (isConfirm) {
                    if (isConfirm) {
                        // $.alert('确认');

                        confirm(token, "confirm").then(function (){
                            $.alert('登录成功')
                        }).catch(function (data){
                            alert(data)
                        });


                    } else {
                        // $.alert('取消');

                        confirm(token, "cancel").then(function (){
                            $.alert('已取消')
                        }).catch(function (data){
                            alert(data)
                        });
                    }
                });

            }).catch(function (data){
                alert(data)
            })

        }

        /**
         *
         * 认证客户端的accessToken 是否合法，并且校验 临时扫码登录token关联的二维码是否有效
         * @param token 临时扫码登录token
         *
         */
        function authAccessToken(token) {
            return new Promise((resolve, reject) => {
                var accessToken = $("#accessToken").val();
                if (token != "" && accessToken != "") {

                    $.ajax({
                        type: 'POST', // 请求的方式
                        url: 'http://192.168.1.6:8081/api/scanQrcodeLogin/authAccessToken',  // 请求的 URL 地址
                        headers: {"Authorization": "Bearer " + accessToken, "Request-Type": "ajax"},
                        // dataType: "json",
                        data: {token},
                        success: function (res, textStatus, xhr) { // 请求成功之后的回调函数

                            if (res.code != 200) {
                                // alert(res.message)
                                reject(res.message);
                                return;
                            }

                            if (res.code == 200) {

                                resolve(res.data);
                                return;
                            }

                        }
                    })

                    return;
                }
                reject("请先登录或者二维码扫描未识别");
            })
        }

        /**
         * 确认登录
         * @param token 临时扫码登录凭证
         * @param operationType 操作类型  confirm：确认 ；cancel：取消登录
         */
        function confirm(token, operationType){

            return new Promise((resolve, reject) => {
                var accessToken = $("#accessToken").val();
                if (token != "" && accessToken != "") {

                    $.ajax({
                        type: 'POST', // 请求的方式
                        url: 'http://192.168.1.6:8081/api/scanQrcodeLogin/confirm',  // 请求的 URL 地址
                        headers: {"Authorization": "Bearer " + accessToken,"Request-Type": "ajax"},
                        contentType: "application/json",
                        dataType: "json",
                        data: JSON.stringify({token, operationType}),
                        success: function (res, textStatus, xhr) { // 请求成功之后的回调函数

                            if (res.code != 200) {
                                // alert(res.message)
                                reject(res.message);
                                return;
                            }

                            if (res.code == 200) {

                                resolve(res.data);
                                return;
                            }

                        }
                    })

                    return;
                }
                reject("请先登录或者二维码扫描未识别");
            })

        }
    })

</script>
<script src="lib/qrcode.js"></script>
<script>
    //初始化扫描二维码按钮，传入自定义的 node-type 属性
    $(function () {
        Qrcode.init($('[node-type=qr-btn]'));
    });
</script>

<script type="text/javascript">

    /**
     * 页面初始化
     */
    $(function () {

        //强化jquery 表单数据对象化
        (function ($) {
            $.fn.serializeJson = function () {
                var serializeObj = {};
                $(this.serializeArray()).each(function () {
                    serializeObj[this.name] = this.value;
                });
                return serializeObj;
            };
        })(jQuery);

    });

    $(document).ready(function () {

        //登录
        $("#login").click(function () {

            var params = $("#loginForm").serializeJson();
            if (!params.username || !params.password) {
                alert("请输入用户名和密码")
                return;
            }

            $.ajax({
                type: 'POST', // 请求的方式
                url: 'http://192.168.1.6:8081/api/login',  // 请求的 URL 地址
                headers: {"Request-Type": "ajax"},
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(params),
                success: function (res, textStatus, xhr) { // 请求成功之后的回调函数

                    if (res.code != 200) {
                        alert(res.message)
                        return;
                    }

                    if (res.code == 200) {

                        $("#accessToken").val(res.data)
                        alert("登录成功")
                        return;
                    }

                }
            })
        })

        $("#testAlert").click(function () {

            $.confirm('是否确认？', function (isConfirm) {
                if (isConfirm) {
                    $.alert('确认');
                } else {
                    $.alert('取消');
                }
            });
        })


    })
</script>
</body>

</html>
